<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="./zui/css/zui.css" rel="stylesheet">

<title>新版@数据表格</title>
<script src="./zui/lib/jquery/jquery-2.0.3.min.js"></script>
<script src="./zui/js/zui.js"></script>


<link href="./zui/lib/datagrid/zui.datagrid.min.css" rel="stylesheet">
<script src="./zui/lib/datagrid/zui.datagrid.min.js"></script>
  <style>
    .container{
        width:1140px;max-width: 1140px
    }
    .example{
        width:980px;max-width: 980px
    }
</style>
</head>
 <body> 
 

 <div class="row">
 <div class="col-lg-2 col-md-2>"> 
 <h1>数据表格2  </h1>
 </div>

  <div class="col-lg-10 col-md-10>">
  <div class="example">
  
 <!-- 表格代码 -->
   <div id="datagridExample" class="datagrid datagrid-striped" data-ride="datagrid"><h1>数据表格2示例</h1></div>

  </div>
  </div>


</div>

</body>
<script >
/* 初始化数据表格 */
//alert($('table.datatable'));
$('#datagridExample').datagrid({
    dataSource: {
        cols:[
            {name: 'time', label: '时间', width: 200},
            {name: 'hera', label: '英雄', width: 100},
            {name: 'action', label: '动作', width: 109},
            {name: 'target', label: '目标', width: 200},
            {name: 'desc', label: '描述', width: 300}
        ],
        array:[
            {time: '00:11:12', hero:'幻影刺客', action: '击杀', target: '斧王', desc: '幻影刺客击杀了斧王。'},
            {time: '00:13:22', hero:'幻影刺客', action: '购买了', target: '隐刀', desc: '幻影刺客购买了隐刀。'},
            {time: '00:19:36', hero:'斧王', action: '购买了', target: '黑皇杖', desc: '斧王购买了黑皇杖。'},
            {time: '00:21:43', hero:'力丸', action: '购买了', target: '隐刀', desc: '力丸购买了隐刀。'}
        ]
    },
    /*样式设置*/
	configs: {
		 cols: {
		 	className: 'text-center',
                style: {
	                color: '#00b8d4',
	                backgroundColor: '#e0f7fa'
	            }
	        },
		//列2设置
	        C2: {
	            className: 'text-right',
	            style: {
	                color: '#00b8d4',
	                backgroundColor: '#e0f7fa'
	            }
	        },
	        //第1行第1列设置不包括表头
	        // R1C1: {
	        //     style: {textDecoration: 'underline'}
	        // },
	        R1: {
	        	 className: 'text-left',
                style: {
	                color: '#00b8d4',
	                backgroundColor: '#e0f7fa'
	            }
	        }
	    },
    // ... 其他初始化选项
    sortable: true,//表格排序开启
    checkable: true,//开启表格选择
    checkByClickRow: true,//开启行选择
    height: '200',//设置行高
    selectable: true,
    /*如果启用了行选中，并且页面已导入拖拽选取插件，则允许用户在界面上进行拖拽框选多行，禁用此功能，可以将 selectable 设置为 false。selectable 还可以接受一个对象作为拖拽选取插件初始化参数，用于自定义拖拽选取交互方式。*/
});

// var myDataGrid = $('#datagridExample').data('zui.datagrid');

// // 设置第 1 页
// myDataGrid.setPager(1);
// // 搜索 “斧王”
// myDataGrid.setSearch('斧王');
</script>